<template>
  <div class="order">
    <!-- 顶部说明 -->
    <van-sticky>
      <div class="order-top">
        <van-icon name="arrow-left" size="20" @click="returnGoods()" />
        <div class="order-top-text">确认订单</div>
      </div></van-sticky
    >
    <!-- 头部信息：店铺、取餐时间和堂食/外带选项-->
    <OrderHeader></OrderHeader>
    <!-- 中间订单 -->
    <OrderMiddle></OrderMiddle>
    <!-- 下部选项 -->
    <OrderFooter></OrderFooter>
  </div>
  <!-- 底部提交 -->
  <van-sticky position="bottom" offset-bottom="4vw"
    ><div class="cart">
      <div class="cart-content">
        <van-icon class="cart-content-icon" size="5vh" name="shopping-cart" />
        <div class="cart-content-num">
          <!-- 未选购商品 -->
          <span v-if="cartStore.totalPrice == 0">还未选购商品</span>
          <!-- 已选购商品 -->
          <span v-else>合计:￥{{ cartStore.totalPrice }}</span>
        </div>
        <van-button class="cart-content-button" @click="sumbitOrder()"
          >提交订单</van-button
        >
      </div>
    </div>
  </van-sticky>
  <van-dialog
    v-model:show="showReturnDiag"
    message="确定要放弃订单吗？"
    width="60vw"
    show-cancel-button
    @confirm="confirmClear()"
  ></van-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { usecartStore, useorderStore } from "@/store/modules/module.js";
import { useRouter } from "vue-router";
import OrderHeader from "@/components/order/Header.vue";
import OrderMiddle from "@/components/order/Middle.vue";
import OrderFooter from "@/components/order/Footer.vue";

const cartStore = usecartStore();
const orderStore = useorderStore();
const router = useRouter();

let showReturnDiag = ref(false);

const returnGoods = () => {
  showReturnDiag.value = true;
};

const confirmClear = () => {
  cartStore.clearCart();
  orderStore.clearOrder();
  router.push({ path: "/goods", name: "Goods" });
  showReturnDiag.value = false;
};
const sumbitOrder = () => {
  console.log("submit");
};
</script>
<style lang="less" scoped>
.order {
  height: 100vh;
  background-color: #f7f7f7;
  van-sticky {
    background-color: #ffffff;
  }
  .order-top {
    display: flex;
    width: 100vw;
    height: 5vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #ffffff;
    .order-top-text {
      font-size: 5vw;
      width: 100vw;
    }
  }
  .order-middle {
  }
  .order-bottom {
    height: 40vh;
  }
}
.cart {
  // overflow-y: hidden;
  .cart-content {
    display: grid;
    grid-template-columns: 20% 50% 30%;
    grid-template-areas: "icon num button";
    align-items: center;
    width: 100vw;
    height: 6vh;
    background-color: #d81919;
    border-radius: 5vw;
    overflow-y: hidden;
    .cart-content-icon {
      left: 3vw;
      grid-area: icon;
      justify-self: start;
      height: 5vh;
      width: 10vw;
      color: #fcb309;
    }
    .cart-content-num {
      text-align: left;
      grid-area: num;
      font-size: 5vw;
      color: #f7f7f7;
    }
    .cart-content-button {
      grid-area: button;
      justify-self: end;
      background-color: #fcb309;
      font-weight: 500;
      border-radius: 5vw;
      width: 30vw;
      height: 6vh;
      font-size: 4vw;
    }
  }
  van-sticky {
    z-index: 9999;
  }
}
</style>
